<template>
  <el-card class="box-card-component" style="margin-left: 8px">
    <el-row>
      <el-col :span="24">
        <el-container>
          <el-header>操作系统信息</el-header>
          <el-main>
            <el-row>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple">操作系统名称</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ osData.name }}</div>
              </el-col>

              <el-col
                :span="3"
              ><div class="grid-content bg-purple">硬件架构</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ osData.machine }}</div>
              </el-col>

              <el-col
                :span="3"
              ><div class="grid-content bg-purple">内核版本</div>
              </el-col>
              <el-col
                :span="9"
              ><div class="grid-content bg-purple-light">{{ osData.version }}</div>
              </el-col>

              <!-- <el-col
                :span="3"
              ><div class="grid-content bg-purple">内核架构</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ osData.arch }}</div>
              </el-col> -->
            </el-row>

            <el-row>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple">系统描述</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ osData.description }}</div>
              </el-col>

              <el-col
                :span="3"
              ><div class="grid-content bg-purple">系统供应商</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ osData.vendor }}</div>
              </el-col>

              <el-col
                :span="3"
              ><div class="grid-content bg-purple">供应商版本</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ osData.vendor_version }}</div>
              </el-col>

              <el-col
                :span="3"
              ><div class="grid-content bg-purple">供应商代码</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ osData.vendor_code_name }}</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple">core限制(当前/最大)</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ limitData.core_cur | limitFilter }} / {{ limitData.core_max | limitFilter }}</div>
              </el-col>

              <el-col
                :span="3"
              ><div class="grid-content bg-purple">内存限制(当前/最大)</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ limitData.memory_cur | limitFilter }} / {{ limitData.memory_max | limitFilter }}</div>
              </el-col>

              <el-col
                :span="3"
              ><div class="grid-content bg-purple">句柄限制(当前/最大)</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ limitData.open_files_cur | limitFilter }} / {{ limitData.open_files_max | limitFilter }}</div>
              </el-col>

              <el-col
                :span="3"
              ><div class="grid-content bg-purple">堆栈限制(当前/最大)</div>
              </el-col>
              <el-col
                :span="3"
              ><div class="grid-content bg-purple-light">{{ limitData.stack_cur | limitFilter }} / {{ limitData.stack_max | limitFilter }}</div>
              </el-col>
            </el-row>

          </el-main>
        </el-container>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { getOSDetail } from '@/api/detail'
import { Message } from 'element-ui'
import resize from '@/mixins/resize'

export default {
  filters: {
    limitFilter(status) {
      return status === -1 ? '无限' : status
    }
  },
  mixins: [resize],
  props: {
    module: {
      type: Number,
      require: true,
      default() {
        return 0
      }
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '310px'
    }
  },
  data() {
    return {
      osData: {
        'name': '',
        'version': '',
        'arch': '',
        'machine': '',
        'description': '',
        'patch_level': '',
        'vendor': '',
        'vendor_version': '',
        'vendor_name': '',
        'vendor_code_name': ''
      },
      limitData: {
        'core_cur': 0,
        'core_max': 0,
        'memory_cur': 0,
        'memory_max': 0,
        'open_files_cur': 0,
        'open_files_max': 0,
        'stack_cur': 0,
        'stack_max': 0
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'roles'])
  },
  mounted() {
    this.getZwmpDetail(this.module)
  },
  methods: {
    getZwmpDetail(module) {
      getOSDetail(module)
        .then((response) => {
          this.osData = response.data.system_info
          this.limitData = response.data.limit_info
        })
        .catch((error) => {
          Message.error(error)
        })
    }
  }
}
</script>

<style lang="scss" >
.box-card-component {
  .el-card__header {
    padding: 0px !important;
  }
  .el-card__body {
    padding: 0px !important;
  }
}
</style>
<style lang="scss" scoped>
.box-card-component {
  .box-card-header {
    position: relative;
    height: 220px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
  .card-panel-text {
    line-height: 18px;
    color: rgba(0, 0, 0, 0.55);
    font-size: medium;
    font-weight: bold;
    margin-top: 14px;
    margin-left: 14px;
  }
  .progress-item {
    margin-bottom: 10px;
    font-size: 14px;
  }
  .el-header,
  .el-footer {
    background-color: #a4a4e6;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    div {
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      margin: auto;
    }
  }

  .el-main {
    // background-color: #e9eef3;
    color: #333;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
    vertical-align: middle;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  @media only screen and (max-width: 1510px) {
    .mallki-text {
      display: none;
    }
  }
}
</style>
